<template>
    <div class="n1">
        <div style="padding: 20px;margin-bottom: 10%">
            <el-form :model="data" :rules="mRules" ref="form" label-width="180px">
                <el-card shadow="never">
                    <div slot="header" class="clearfix">
                        <span>企业信息</span>
                    </div>
                    <div class="n2">
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">企业名称：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.name | nullFilter}}</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">企业类型：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">
                                    <span v-if="!companyInfo.unitType">暂无数据</span>
                                    <el-tag type='info' v-else class="rit5" v-for="tag in split(companyInfo.unitType)">
                                        {{tag}}
                                    </el-tag>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">企业地址：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.address | nullFilter}}
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">企业规模：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.companyScale | nullFilter}}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">主要联系人：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.contactPeople1 |
                                    nullFilter}}
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">备用联系人：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.contactPeople2 |
                                    nullFilter}}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">主要联系人手机：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.phone | nullFilter}}</div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content bg-purple">备用联系人手机：</div>
                            </el-col>
                            <el-col :span="9">
                                <div class="grid-content bg-purple-light info">{{companyInfo.phone2 | nullFilter}}
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                </el-card>
                <el-card style="margin-top: 10px;">
                    <div slot="header" class="clearfix">
                        <span>动态人力资源信息</span>
                    </div>
                    <div>
                        <el-col :span="12">
                            <el-form-item label="数据所属月份：" prop="dataMonth">
                                <el-date-picker
                                        v-model="data.dataMonth"
                                        type="month"
                                        style="width: 100%"
                                        value-format="yyyy-MM"
                                        @blur="this.dateChange"
                                        placeholder="选择月">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="上月末从业人员数：" prop="beforeMonthEndWorkCount">
                                <el-input-number :step="1" :min="0" style="width: 100%"
                                                 v-model="data.beforeMonthEndWorkCount" placeholder="暂无数据"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="本期实际招工人员数：" prop="realWorkCount">
                                <el-input-number :step="1" :min="0" style="width: 100%" v-model="data.realWorkCount"
                                                 placeholder="暂无数据"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="期望招工人员数：" prop="expectWorkCount">
                                <el-input-number :step="1" :min="0" style="width: 100%" v-model="data.expectWorkCount"
                                                 placeholder="暂无数据"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="本月缺工人员数：" prop="thisMonthLackCount">
                                <el-input-number @blur="tiShi(null)"
                                                 @focus="tiShi('本月缺工人数  = 期望招工人数 - 本期实际招工人员数')" :step="1" :min="0"
                                                 style="width: 100%"
                                                 v-model="data.thisMonthLackCount" placeholder="暂无数据"/>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="本月减员人员数：" prop="thisMonthLessCount">
                                <el-input-number :step="1" :min="0" style="width: 100%"
                                                 v-model="data.thisMonthLessCount" placeholder="暂无数据"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="月末从业人员数：" prop="thisMonthEndWorkCount">
                                <el-input-number
                                        @blur="tiShi(null)"
                                        @focus="tiShi('月末从业人员数 = 上月末从业人员数 + 本期实际招工人员数 - 本月减员人员数')"
                                        :step="1" :min="0" style="width: 100%"
                                        v-model="data.thisMonthEndWorkCount" placeholder="暂无数据"/>
                            </el-form-item>
                        </el-col>
                        <!--                        <el-col :span="12">-->
                        <!--                            <el-form-item label="描述：" prop="des">-->
                        <!--                                <el-input style="width: 100%" v-model="data.des" placeholder="暂无数据"/>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                        <el-col :span="24" v-if="tishi">
                            <el-form-item label-width="50px">
                                <div style="color: #ffc835;">
                                    <img style="width: 20px;position: relative;top: 4px; margin-right: 3px"
                                         src="@/assets/image/admin/tan_hao_ffc835.png"/>
                                    {{tishi}}
                                </div>
                            </el-form-item>
                        </el-col>
                        <div style="height:200px"/>
                    </div>
                </el-card>
            </el-form>
        </div>
        <div class="toolbar-bottom-right">
            <el-button class="button" @click="backRouter()" size="medium">返回企业列表</el-button>
            <el-button type="primary" class="button" size="medium" @click="insert()">提交</el-button>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {ElForm} from "element-ui/types/form";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import {errorMsg, successMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {rule} from "@/core/utils/rule";
    import Kit from "@/core/mixin/Kit";
    import {verdictDate} from "@/core/utils/validate";

    @Component({
        name: 'DynamicHumanGEdit',
        components: {},
    })
    export default class DynamicHumanGEdit extends mixins(BaseVue, Kit) {
        //关闭事件
        backRouter() {
            this.back("CompanyGList")
        }

        @Prop({default: {}}) mData!: any;
        @Prop({default: {type: 'insert', title: '添加'}}) option!: any;

        get companyId() {
            return this.$route.query.id;
        }

        get companyUserId() {
            return this.$route.query.userId;
        }

        get companyUserAccount() {
            return this.$route.query.userAccount;
        }

        getUserInfo() {
            return {id: this.companyUserId, account: this.companyUserAccount}
        }

        tishi: any = null;

        tiShi(tishi: string) {
            //console.log(tishi)
            this.tishi = tishi;
        }

        data: any = {
            dataMonth: new Date()
        };

        companyInfo: any = {};

        //关闭时是否刷新分页
        backRefresh: boolean = false;

        // beforeMonthEndWorkCount 上月末从业人员数
        // realWorkCount  本期实际招工人员数
        // expectWorkCount 期望招工人数
        // thisMonthLackCount  本月缺工人数
        // thisMonthLessCount  本月减员人员数
        // thisMonthEndWorkCount  月末从业人员数

        mRules = {
            // des: [rule.notNullBlur()],
            dataMonth: [rule.notNullBlur()],
            beforeMonthEndWorkCount: [rule.notNullBlur()],
            realWorkCount: [rule.notNullBlur()],
            expectWorkCount: [rule.notNullBlur()],
            thisMonthLackCount: [rule.notNullBlur()],
            thisMonthLessCount: [rule.notNullBlur()],
            thisMonthEndWorkCount: [rule.notNullBlur()],
        };

        //初始化
        async mounted() {
            // 查询用户企业
            $http.post(API.companyInfoByUserId, {id: this.getUserInfo().id}).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    this.companyInfo = res.data;
                    this.data.companyId = res.data.id;
                    this.dateChange();
                } else {
                    errorMsg("操作失败");
                }
            });
            let date = new Date();
            let month = date.getMonth() + 1;
            let mm: string;
            if (month < 10) {
                mm = "0" + month;
            } else {
                mm = month.toString();
            }
            this.data.dataMonth = date.getFullYear() + "-" + mm;
        }

        cancel() {
            // 查询用户企业
            $http.post(API.companyInfoByUserId, {id: this.getUserInfo().id}).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    this.companyInfo = res.data;
                    this.data.companyId = res.data.id;
                    this.dateChange();
                } else {
                    errorMsg("操作失败");
                }
            });
            let date = new Date();
            let month = date.getMonth() + 1;
            let mm: string;
            if (month < 10) {
                mm = "0" + month;
            } else {
                mm = month.toString();
            }
            this.data.dataMonth = date.getFullYear() + "-" + mm;
        }

        dateChange() {
            if (!this.data.dataMonth) {
                return;
            }
            if (!verdictDate(this.data.dataMonth)) {
                this.data.dataMonth += "-01";
            }
            $http.post(API.dynamicHumanInfoByMonth, {
                dataMonth: this.data.dataMonth,
                companyId: this.data.companyId
            }).then((res: any) => {
                if (res.success) {
                    this.backRefresh = true;
                    if (res.data) {
                        this.data = res.data;
                        this.$alert('当前选中月份存在数据,重复填写提交,会覆盖原有数据。', '提示', {
                            confirmButtonText: '确定',
                            type: 'warning'
                        });
                    } else {
                        this.data = {
                            dataMonth: this.data.dataMonth,
                            companyId: this.companyInfo.id
                        }
                    }
                } else {
                    errorMsg("操作失败");
                }
            });
        }

        //保存
        insert() {
            // 设置校验规则
            this.mRules.thisMonthEndWorkCount[1] = rule.formulaValidator1(this.data.thisMonthEndWorkCount, this.data.beforeMonthEndWorkCount,
                this.data.realWorkCount, this.data.thisMonthLessCount);
            this.mRules.thisMonthLackCount[1] = rule.formulaValidator2(this.data.thisMonthLackCount, this.data.expectWorkCount, this.data.realWorkCount);
            // 开始校验
            (this.$refs.form as ElForm).validate().then(() => {
                // 规则校验
                // if (this.data.realWorkCount > this.data.thisMonthLackCount) {
                //     this.$alert("实际招工人员数需小于等于缺工人数", "", {
                //         confirmButtonText: '确定',
                //         type: 'warning'
                //     });
                //     return false;
                // }
                // if (this.data.thisMonthLessCount > this.data.beforeMonthEndWorkCount) {
                //     this.$alert("减员人数需小于等于上月末从业人数", "", {
                //         confirmButtonText: '确定',
                //         type: 'warning'
                //     });
                //     return false;
                // }
                // if (this.data.thisMonthEndWorkCount != (this.data.beforeMonthEndWorkCount + this.data.realWorkCount - this.data.thisMonthLessCount)) {
                //     this.$alert("月末从业需等于上月末从业 + 实际招工人数 - 本月减员人数", "", {
                //         confirmButtonText: '确定',
                //         type: 'warning'
                //     });
                //     return false;
                // }
                if (!verdictDate(this.data.dataMonth)) {
                    this.data.dataMonth += "-01";
                }
                $http.post(API.dynamicHumanInfoInsert, this.data).then((res: any) => {
                    if (res.success) {
                        this.backRefresh = true;
                        successMsg("动态人力资源信息保存成功");
                    } else {
                        errorMsg("操作失败");
                    }
                });
            },).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }

    }


</script>

<style scoped lang="scss">
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .info {
        color: #909399;
    }
</style>
